<!--
 * @Description: 登录弹窗
 * @Author: wrysunny
 * @Date: 2024-11-19 11:58:36
 * @LastEditor: wrysunny
 * @LastEditTime: 2024-11-23 15:02:36
-->
<template name="GlobalLoginDialog">
  <up-popup
    :show="userStore.showLoginDialog"
    mode="bottom"
    round="24rpx"
    bgColor="#000000">
    <view
      class="p-[40rpx] text-white border-[4rpx] border-[#B51A26] rounded-t-[24rpx]">
      <view class="w-[84rpx] h-[84rpx]">
        <u-image
          bg-color="transparent"
          :src="logo"
          width="84rpx"
          height="84rpx"></u-image>
      </view>
      <view class="text-[32rpx] font-bold mt-[16rpx]">欢迎加入灵梦模玩</view>
      <view class="text-[26rpx] text-[#ccc] mt-[8rpx]">
        加入后享专属活动&会员好礼
      </view>
      <view class="mt-[32rpx]">
        <view
          class="btn bg-[#B51A26] text-white border-transparent"
          @click="login">
          授权登录
        </view>
        <view class="btn bg-[#000] border-white mt-[20rpx]" @click="noLogin">
          暂时跳过
        </view>
      </view>
      <view class="mt-[16rpx] flex items-start">
        <view class="w-[28rpx] h-[28rpx]" @click="isCheck = !isCheck">
          <up-image
            :src="check"
            v-if="!isCheck"
            width="28rpx"
            height="28rpx"
            bgColor="transparent"></up-image>
          <up-image
            :src="checked"
            v-else
            width="28rpx"
            height="28rpx"
            bgColor="transparent"></up-image>
        </view>
        <view class="text-[22rpx] ml-[8rpx]">
          <text>允许我们在必要场景下，合理使用您的个人信息，且阅读并同意</text>
          <text class="text-[#B51A26]" @click="utils.goRules('用户协议')">
            《用户协议》
          </text>
          <text class="text-[#B51A26]" @click="utils.goRules('隐私政策')">
            《隐私政策》
          </text>
          <text>等内容</text>
        </view>
      </view>
    </view>
  </up-popup>
</template>

<script setup>
import { ref, watch } from "vue";
import utils from "@/utils/utils";
import logo from "@/static/images/common/logo.png";
import check from "@/static/images/index/check.png";
import checked from "@/static/images/index/checked.png";
import { useUserStore } from "@/store/user";
import { onShow } from "@dcloudio/uni-app";
// const show = ref(true);
const userStore = useUserStore();
onShow(() => {
  userStore.showLoginDialog = uni.getStorageSync("token") ? false : true;
});
/**
 * @description: 监听登录状态
 * @return
 */
// watch(
//   () => userStore.isLogin,
//   () => {
//     show.value = !userStore.isLogin;
//     console.log(userStore.isLogin);
//   },
//   { immediate: true }
// );
const isCheck = ref(false);
/**
 * @description: 跳过登录
 * @return
 */
const noLogin = () => {
  utils.showToast("取消登录");
  userStore.showLoginDialog = false;
};
/**
 * @description: 登录
 * @return
 */
const login = async () => {
  if (!isCheck.value) {
    utils.showToast("请阅读并同意协议");
    return;
  }
  userStore.login();
};
</script>

<style lang="scss" scoped>
.btn {
  @apply mx-auto w-[558rpx] h-[96rpx] leading-[92rpx] border rounded-full  text-[32rpx] text-center;
}
.circle {
  @apply w-[28rpx] h-[28rpx] border rounded-full shrink-0;
}
</style>
